<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <button id="btn">红灯</button>

    <script>
        // 需求：点击灯按钮，交通信号灯   红 -》 绿 -》 黄 -》红....

        /*
            思路分析

            1. 获取事件源：button#btn
            2. 确定事件类型：点击事件  onclick
            3. 事件处理
            3.1 获取按钮文字：innerText
            3.2 判定：文字是  什么灯，下次就变成什么效果，同时开关永远代表下一个灯
            3.3 根据文字做不同的效果
            * 改变背景色：body，标签选择器   document.body
            * 改变按钮的文字：innerText = 新值
        
        */

        // 1. 获取事件源：button#btn
        let btn = document.querySelector('#btn');
        // 2. 确定事件类型：点击事件  onclick
        btn.onclick = function () {
            // 3. 事件处理
            // 3.1 获取按钮文字：innerText
            let value = this.innerText;
            // 3.2 判定：文字是  什么灯，下次就变成什么效果，同时开关永远代表下一个灯
            // 3.3 根据文字做不同的效果
            //     * 改变背景色：body，标签选择器   document.body
            //     * 改变按钮的文字：innerText = 新值
            if (value == '红灯') {
                document.body.style.backgroundColor = 'red';
                this.innerText = '绿灯';
            } else if (value == '绿灯') {
                document.body.style.backgroundColor = 'green';
                this.innerText = '黄灯';
            } else {
                document.body.style.backgroundColor = 'yellow';
                this.innerText = '红灯';
            }
        };


    </script>
</body>

</html>